<!DOCTYPE html>
<html lang="pt-br">

	<head>
		<title>Oráculo</title>
		<meta name="description" value="" />
		<meta name="keywords" value="" />
		<meta name="author" value="" />
		<meta charset="utf-8" />

		<link rel="stylesheet" href="css/bootstrap.css" />
		



		<!-- CSS para modificações no layout - André (23/01/13) -->
		<link rel="stylesheet" href="css/oraculo.css" />
				
		<script type="text/javascript" src="js/jquery-1.8.2.min.js"></script>		
		<script type="text/javascript" src="js/bootstrap.js"></script>
		<script type="text/javascript" src="js/batches_job.js"></script>
		
		<script type="text/javascript" src="js/debug.js"></script>

		<script type="text/javascript" src="js/init.js"></script>
		<script type="text/javascript" src="js/facebook.js"></script>
		
		<script type="text/javascript" src="js/movie-week.js"></script>
		<script type="text/javascript" src="js/atores.js"></script>		
		<script type="text/javascript" src="js/dma-carousel.js"></script>
		<script type="text/javascript" src="js/control.js"></script>
		<script type="text/javascript" src="js/oraculo_pesquisa.js"></script>


	</head>

	<body>

		<a class="close" data-dismiss="alert" href="#">OI</a>

		<div id="fb-root"></div>
		<script>
		  window.fbAsyncInit = function() {
		    // init the FB JS SDK
		    FB.init({
		      appId      : '638778706148876',                        // App ID from the app dashboard
		      channelUrl : 'www.oraculo-pesquisa.appspot.com/channel', // Channel file for x-domain comms
		      status     : true,                                 // Check Facebook Login status
		      xfbml      : true                                  // Look for social plugins on the page
		    });

		  };

		  // Load the SDK asynchronously
		  (function(d, s, id){
		     var js, fjs = d.getElementsByTagName(s)[0];
		     if (d.getElementById(id)) {return;}
		     js = d.createElement(s); js.id = id;
		     js.src = "//connect.facebook.net/en_US/all.js";
		   	  fjs.parentNode.insertBefore(js, fjs);
		   }(document, 'script', 'facebook-jssdk'));
		</script>		

		<div id="wrapper" class="wrapper">
			<div id="slider" class="slider">
				<div class="tela">
					<div class="hero-unit">
						<div id="logo">
							<img src="img/popcorn.png" />
						</div>

						<div id="presentation">
							<h1>Cinema com os amigos</h1>
							<p>Você é uma daquelas pessoas que adoram ir ao cinema. Seja pra curtir com a(o) namorada(o), com os amigos cult ou com o seu sobrinho ou filhos, você quer escolher um bom filme para assistir. Você pretende ir ao cinema uma vez por semana, e quer escolher o melhor dentre  os filmes disponíveis no cinema. O único problema é que você não tem muita informação disponível a não ser o <em>gênero</em>, os <em>atores principais</em>, os <em>comentários</em> de alguns amigos no Facebook e <em>número de pessoas</em> que assistiram ao filme. Nesta pesquisa lhe serão apresentadas 5 semanas para se tomar uma decisão. Boa sorte, e não esqueça a pipoca e o chocolate! </p>
							<p>

								<button id="next1" class="btn btn-warning btn-large next">
									Ir para o cinema!	
								</button>
							</p>
						</div>
					</div>
				</div>

				<div class="tela">
					<div class="hero-unit">

						<div class="message-div">
							<p id="span-acao" style="display:block">Escolha uma Ação</p>
							<p id="span-facebook">Conecte-se usando a sua conta no Facebook para ter uma experiência personalizada =]</p>
							<p id="span-not-nice">Você pode optar por não se conectar, mas a pesquisa será menos interessante =[</p>
						</div>

						<div class="tela-2-controls">
							<button id="facebook-connect" class="btn btn-primary btn-large">
								Continuar usando o Facebook	
							</button>

							<button id="no-facebook" class="btn btn-inverse btn-large next">
								Continuar sem usar o Facebook
							</button>						
						</div>

						<div class="tela-2-debug-info">
							<div class="tela-2-debug-message">
								Aguarde enquanto procuramos quais dos seus amigos irão lhe ajudar hoje!
							</div>
							<div class="progress progress-striped active">
								<div class="bar" style="width: 0%;"></div>
							</div>		


							<div class="tela-2-debug-friends">
							</div>		

							<button id="next2" class="btn btn-primary btn-large next">
								Continuar
							</button>
						</div>

					</div>
				</div>				

				<div class="tela">
					<div class="hero-unit">
						<h1>Suas preferências</h1>
						<p>Antes de começar precisamos saber quais são as suas preferências para gênero e atores principais.</p>
						
						<form class="form-horizontal">
							<div class="control-group">					
								<label for="select-genero" class="control-label">Gênero Preferido</label>
								<div class="controls">
									<select id="select-genero">
										<option value="acao">Acao/Aventura</option>
										<option value="comedia">Comedia</option>
										<option value="drama">Drama/Musical</option>
									</select>
								</div>
							</div>
						
							<div class="control-group">
								<label for="txt-atores" class="control-label">Atores Favoritos</label>
								<div class="controls">
									<input type="text" readonly="readonly" id="txt-atores" name="txt-atores" />
									<a class="btn" style="float:none !important" href="javascript:control.reselectActors()"><i class="icon-repeat"></i></a>
								</div>
							</div>

							<p>Use a ferramenta abaixo para escolher os seus dois atores favoritos</p>							
							<div id="actorsBeforeFlag" class="carousel slide">

								<a class="carousel-control left" id="prev-carousel">&lsaquo;</a>
								<a class="carousel-control right" id="next-carousel">&rsaquo;</a>							
							</div>		

							<div class="ator-tool-selection">
								<label class="checkbox" style="width:130px">
									<input type="checkbox" value="0" checked="checked" />Ganhador de Oscar
								</label>
								<label class="checkbox"style="width:65px">
									<input type="checkbox" value="1" checked="checked" />Brasileiro
								</label>								
								<label class="checkbox" style="width:85px">
									<input type="checkbox" value="2" checked="checked" />Internacional
								</label>								
								<label class="checkbox"  style="width:58px">
									<input type="checkbox" value="3" checked="checked" />Homem
								</label>						
								<label class="checkbox" style="width:60px">
									<input type="checkbox" value="4" checked="checked" />Mulher
								</label>										
							</div>		

						</form>


						<button id="next3" class="btn btn-warning btn-large next" style="display:none;margin-top:-10px">
							Vamos começar!
						</button>

					</div>

				</div>	

				<div class="tela">
					<div class="hero-unit">
						<h1>Semana 1</h1>

						<div id="movie-week-1" class="poster-collection">	

						</div>

						<button id="next4" class="btn btn-warning btn-large week next" style="display:none">
							Quero assistir esse!
						</button>

						<button id="mostrar1" class="btn btn-primary btn-large week mostrar" style="float:left;display:none">
							Mostrar todos os filmes
						</button>						

					</div>

				</div>		

				<div class="tela">
					<div class="hero-unit">
						<h1>Semana 2</h1>

						<div id="movie-week-2" class="poster-collection">	

						</div>

						<button id="next5" class="btn btn-warning btn-large week next" style="display:none">
							Quero assistir esse!
						</button>

						<button id="mostrar2" class="btn btn-primary btn-large week mostrar" style="float:left;display:none" >
							Mostrar todos os filmes
						</button>						

					</div>

				</div>		

				<div class="tela">
					<div class="hero-unit">
						<h1>Semana 3</h1>

						<div id="movie-week-3" class="poster-collection">	

						</div>

						<button id="next6" class="btn btn-warning btn-large week next" style="display:none">
							Quero assistir esse!
						</button>

						<button id="mostrar3" class="btn btn-primary btn-large week mostrar" style="float:left;display:none">
							Mostrar todos os filmes
						</button>						

					</div>

				</div>			

				<div class="tela">
					<div class="hero-unit">
						<h1>Semana 4</h1>

						<div id="movie-week-4" class="poster-collection">	

						</div>

						<button id="next7" class="btn btn-warning btn-large week next" style="display:none">
							Quero assistir esse!
						</button>

						<button id="mostrar4" class="btn btn-primary btn-large week mostrar" style="float:left;display:none">
							Mostrar todos os filmes
						</button>						

					</div>

				</div>		

				<div class="tela">
					<div class="hero-unit">
						<h1>Semana 5</h1>

						<div id="movie-week-5" class="poster-collection">	

						</div>

						<button id="next8" class="btn btn-warning btn-large week next" style="display:none">
							Quero assistir esse!
						</button>

						<button id="mostrar5" class="btn btn-primary btn-large week mostrar" style="float:left;display:none">
							Mostrar todos os filmes
						</button>						

					</div>

				</div>						

				<div class="tela">
					<div class="hero-unit">
						<h1>Confira suas respostas</h1>

						<div id="check-answers" class="check-answers">

						</div>

						<button class="btn btn-warning btn-large restart">
							Recomeçar!
						</button>

						<button id="next9" class="btn btn-warning btn-large week next fim">
							Enviar!
						</button>

					</div>

				</div>			

				<div class="tela">
					<div class="hero-unit">
						<div id="carregando">Enviando...</div>
						<div id="agradecimento">
							<img src="img/valeu.png" />
							<div>
								Obrigado pela sua <br /> Participação!
							</div>								
						</div>						
					</div>

				</div>																					

			</div>
		</div>

	</body>

</html>
